<template>
    <div>
        <el-form :model="form" :rules="rules" ref="form">
            <el-form-item label="管理员名" label-width="80px" prop="username">
                <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="权限" label-width="60px" prop="name">
                <el-checkbox-group v-model="checkedLabels">
                    <el-checkbox v-for="item in privilegeOptions" :key="item.bit" :label="item.label">
                        {{ item.label }}
                    </el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="密码" label-width="80px" prop="password">
                <el-input v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item style=" display: flex; justify-content: flex-end;">
                <el-button type="primary" @click="submit">确定</el-button>
                <el-button @click="qx">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { adminadd } from '@/api/admin';
export default {
    data() {
        return {
            form: {
                id: -1,
                username: "",
                privilege: '',
                password: ''
            },
           checkedLabels: [],
            privilegeOptions: [
                { label: "系管理", bit: 0 },
                { label: "专业管理", bit: 1 },
                { label: "班级管理", bit: 2 },
                { label: "学生管理", bit: 3 },
                { label: "教师管理", bit: 4 },
                { label: "课程管理", bit: 5 },
                { label: "选课修改", bit: 6 },
                { label: "管理员管理", bit: 7 },
            ],
            rules: {
                username: [{
                    required: true, message: "请输入管理员名", trigger: "blur"
                }],
                 password: [{
                    required: true, message: "请输入密码", trigger: "blur"
                }]
            }

        }
    },
    methods: {
        submit() {
            this.privilegeOptions.forEach(item => {
                // 判断当前权限项是否被选中
                if (this.checkedLabels.includes(item.label)) {
                    // 若选中，用位或运算将对应位设为 1（1 << item.bit 生成对应位的掩码）
                    this.privilegeValue |= (1 << item.bit);
                }
                this.form.privilege=this.privilegeValue
            });
            
            // 触发表单验证
            this.$refs['form'].validate(falg => {
                if (falg) {
                    adminadd(this.form).then(res => {
                        if (res.code === 0) {
                            this.$message({
                                type: "success",
                                message: "添加成功"
                            })
                            // 通知父级关闭对话框
                            this.$emit("close")
                        }

                    })
                }
            })

        },
        qx() {
            this.$emit("close")
        }
    }
}
</script>

<style lang="sass" scoped>

</style>